23.06.03

오늘 한 일

• 알고리즘 문제 풀이
• 학림이가 진행하는 프로젝트에서의 웹뷰 테스트 진행
• 카공실록 갤러리 페이지 구현
• 카공실록 코드리뷰
• 리뷰 상세 페이지 구현
• 소프트웨어공학 시험 공부

---

학림이가 진행하는 프로젝트에서의 웹뷰 테스트 진행

1. 웹뷰 -> 모바일

플러터에서 정의해둔 LoginToaster의 postMessage 메서드를 리액트에서 호출한다. 이때 postMessage의 인자로는 JSON.stringify를 통해 문자열로 변환한 객체를 전달한다.

const handleClick = () => {
  LoginToaster.postMessage(
    JSON.stringify({
      loginSuccess: true,
    })
  );
};

타입스크립트를 사용하는 경우에는 LoginToaster의 타입을 정의해주어야 한다.

// LoginToaster.d.ts
declare namespace LoginToaster {
  function postMessage(message: string): void;
}

2. 모바일 -> 웹뷰

이제 모바일 단에서 요청을 처리해서 자바스크립트 코드를 주입해줄 것이다. window.flutterWebView 함수를 정의해주고, 이 함수를 통해 모바일 -> 웹뷰로 데이터를 전달한다.

<script>
  window.flutterWebView = function (message)
  {
    // message를 파싱해서 사용
  };
</script>

여기서도 마찬가지로 타입스크립트를 사용하는 경우에는 타입을 정의해주어야 한다.

// index.d.ts
declare global {
  interface Window {
    flutterWebView: (message: string) => void;
  }
}

컴포넌트에서 사용하기

이제 컴포넌트에서 사용할 수 있도록 해보자.

const handleClick = () => {
  LoginToaster.postMessage(
    JSON.stringify({
      loginSuccess: true,
    })
  );
};

useEffect(() => {
  window.flutterWebView = (message) => {
    // message를 파싱해서 사용
  };
}, []);

주의할 점

window 객체는 브라우저에서만 사용할 수 있기 때문에, 서버사이드 렌더링을 할 때는 window 객체가 존재하지 않는다. 그래서 typeof window !== 'undefined'를 통해 window 객체가 존재하는지 확인해주어야 한다. (useEffect에서는 mount 시점에만 호출되기 때문에, 여기서는 확인할 필요가 없다.)

if (typeof window !== 'undefined') {
  window.flutterWebView = (message) => {
    // message를 파싱해서 사용
  };
}

재사용성을 위한 커스텀 훅

커스텀 훅을 만들어서 재사용성을 높일 수 있다.

// useFlutterWebView.ts
import { useEffect } from 'react';

const useFlutterWebView = (callback) => {
  // 대충 필요한 코드들

  useEffect(() => {
    window.flutterWebView = callback;
  }, [callback]);
};

export default useFlutterWebView;

// 컴포넌트에서 사용
useFlutterWebView((message) => {
  // message를 파싱해서 사용
});

상황에 맞게 사용하면 될 것 같다.

카공실록 갤러리 페이지 구현

고민점

여기서 가져오는 이미지 url은 리뷰 데이터들의 images 필드에 들어있다. 근데 갤러리에서 이미지마다 올린 유저까지 보여줘야 한다. 그래서 이미지와 유저 정보를 매핑해주었다.

images 필드가 배열이기 때문에 map을 두 번 사용했다. 그리고 flat을 사용해서 2차원 배열을 1차원 배열로 만들어주었다.

const { data: reviews } = useGetReviews(params.id);

const images = reviews
  ?.map((review) =>
    review.images.map((image) => ({
      url: image.url,
      userId: review.userId,
      userNickname: review.userNickname,
    }))
  )
  .flat();

카공실록 코드리뷰

드디어 우리 팀원들의 PR이 올라왔다! 하나하나 꼼꼼히 보고 코드리뷰를 진행했다.

쭉 보면서 느낀 점은, 컨벤션이 확실하게 정해져 있지 않아 통일성이 부족했다 😅
그래서 팀원들을 불러서 애매한 부분들을 토의하고, 컨벤션을 정해주었다.

하다보니 남긴 코멘트가 30개 정도 되었다ㅋㅋㅋ

내가 짠 코드들과 중복되는 코드들도 많아서, 나중에 리팩토링을 진행해야겠다.

---

내일 할 일

• 알고리즘 문제 풀이
• 소프트웨어공학 시험 공부
• 카공실록 코드리뷰